<template>
  <div id="importFileAuto">
    <el-button
      type="info"
      class="download_btn fa fa-file-excel-o"
      @click="downloadTemplete"
    >
      {{
        this.importObjectType === 'IPHONE' ? '手机号下载模板' : '大鹏号下载模板'
      }}
    </el-button>
    <el-upload
      action="#"
      accept=".xlsx,.xls"
      :auto-upload="false"
      :show-file-list="true"
      :file-list="fileList"
      :limit="1"
      :on-exceed="handleExceed"
      :on-remove="handleRemove"
      :on-change="handleChange"
    >
      <el-button class="upload-btn" style="width:120px" type="primary">
        {{
          this.importObjectType === 'IPHONE'
            ? 'Excel导入手机号'
            : 'Excel导入大鹏号'
        }}
      </el-button>
      <div slot="tip" class="el-upload__tip">
        提示：仅允许导入“xls”或“xlsx”格式文件！
      </div>
    </el-upload>
    <h3 v-if="showTotal">
      当前共导入{{
        this.importObjectType === 'IPHONE' ? iphoneLeng : userLeng
      }}位用户
    </h3>
  </div>
</template>

<script>
export default {
  name: 'ImportFile',
  props: {
    dialogData: {
      type: Object,
      default: function() {
        return {
          url: '', // 导入接口
          downUrl: '', // 下载模板接口
          users: [], // 上传成功后，返回的users
          iphones: [] //上传成功后返回的iphones
        }
      }
    },
    importObjectType: String,
    showTotal: {
      type: Boolean,
      default: function() {
        return true
      }
    }
  },
  data() {
    return {
      fileList: [],
      userLeng: 0,
      iphoneLeng: 0,
      importStatusData: this.importObjectType
    }
  },
  computed: {
    switchStatus: function() {
      return this.importStatusData // 监听switchStatusData 的变化
    }
  },
  // mounted() {
  //   this.importObjectType = this.switchStatus.importObjectType
  // },
  watch: {
    switchStatus: {
      deep: true,
      handler(newValue, oldValue) {
        this.importObjectType = newValue.importObjectType
      }
    }
  },
  methods: {
    handleChange(file, fileList) {
      //校验格式
      let FileExt = file.name.replace(/.+\./, '')
      if (FileExt !== 'xlsx' && FileExt !== 'xls') {
        this.$message({
          message: '文件格式错误！',
          type: 'warning'
        })
        this.fileList = []
        return
      }
      //let url = '/users/dp-account-user/import'
      let url = this.dialogData.url
      let formData = new FormData()
      formData.append('file', file.raw)
      this.pubRequire('post', url, formData, (response) => {
        /*this.dialogData.users = response.users*/
        if (this.importObjectType === 'IPHONE') {
          this.$emit('getIphones', response.mobiles)
          this.iphoneLeng = response.mobiles.length
           // 验证手机号导入失败的返回字段，触发获取手机号导入失败信息的方法
          if (response.mobileError == 'mobileError') {
            this.$emit('mobileError', response.message)
          }
        }
        this.$emit('getUsers', response.users)
        this.userLeng = response.users.length
        // 验大鹏号证导入失败的返回字段，触发获取大鹏号导入失败信息的方法
        if (response.hasError == 'hasError') {
          this.$emit('showError', response.message)
        }
      })
    },
    handleRemove(file, fileList) {
      if (this.importObjectType === 'IPHONE') {
        this.$emit('getIphones', [])
        this.iphoneLeng = 0
      }
      this.$emit('getUsers', [])
      this.userLeng = 0
    },
    handleExceed(files, fileList) {
      this.$message.warning(`请先删除已上传文件!`)
    },
    // 下载模板按钮
    downloadTemplete() {
      let url = this.dialogData.downUrl
      this.downFile('get', url, '', '模板')
    }
  }
}
</script>

<style lang="less">
#importFileAuto {
  .upload-btn {
    height: 26px;
    width: 94px;
    font-size: 14px;
  }
  .el-upload__tip {
    display: inline-block;
    margin-left: 10px;
    color: #f00;
    line-height: 14px;
  }
}
</style>
